<template>
  <el-card>
    <h1>富文本编辑器wangeditor</h1>
    <el-divider></el-divider>
    <vue-wangeditor ref="richText" id="editor" v-model="text"></vue-wangeditor>
    <el-divider></el-divider>
    <el-button @click="setHtml" type="primary">设置富文本</el-button>
    <el-button @click="getHtml" type="success">获取富文本</el-button>
  </el-card>
</template>

<script>
// 引入vue-wangeditor
import vueWangeditor from "vue-wangeditor";
export default {
  components: { vueWangeditor },
  data() {
    return {
      text: `<h1>富文本编辑器</h1>`
    };
  },
  methods: {
    // 获取富文本
    getHtml() {
      // console.log(this.text);
      const richText = this.$refs["richText"].getHtml();
      console.log(richText);
    },
    // 设置富文本
    setHtml() {
      const html = `<h1>hello world!!!</h1>`;
      this.$refs["richText"].setHtml(html);
    }
  }
};
</script>

<style>
</style>